import React, { Component } from 'react'
import { Icon } from 'antd-mobile'
import { FooterTab } from '../footer'
import { Calendar } from './'

export default class FinancePage extends Component {
  constructor() {
    super()
    this.state = {
      tabIndex: 0,
    }
  }
  render() {
    const { tabIndex } = this.state
    return (
      <div className={`rt-finance-page-container cm-column-flex-box`}>
        <header>财经</header>
        <div className={`cm-tabs-box`}>
          {
            ['新闻', '日历'].map((v, i) => (
              <span
                key={i}
                className={`${tabIndex === i ? '-active' : ''}`}
                onClick={() => {
                  if (tabIndex === i) return
                  this.setState({tabIndex: i})
                }}
              >
                {v}
              </span>
            ))
          }
        </div>

        <Calendar />

        <div className={`cm-scrollable-container`}>
          {
            Array(4).fill(1).map(v => (
              <div key={Math.random()} className={`-row`}>
                <div className={`-top`}>
                  <div>
                    <time>07:01</time>
                    <span>英国</span>
                  </div>
                  <div className={`-right`}>
                    <span>影响力</span>
                    <Icon type="star" />
                    <Icon type="star" />
                    <Icon type="star" />
                  </div>
                </div>
                <div className={`-content`}>
                  <div className={`-text`}>核心生产者输出物价指数（年率）</div>
                  <div className={`-val-box -horizontal`}>
                    <div className={`-current`}>
                      <span className={`-small-font`}>现值</span>
                      <span>10%</span>
                    </div>
                    <div className={`-expected`}>
                      <span className={`-small-font`}>预期值</span>
                      <span>-2%</span>
                    </div>
                    <div className={`-previous`}>
                      <span className={`-small-font`}>前值</span>
                      <span>-1%</span>
                    </div>
                  </div>
                </div>
              </div>
            ))
          }

          {
            Array(4).fill(1).map(v => (
              <div key={Math.random()} className={`-row`}>
                <div className={`-top`}>
                  <div>
                    <time>07:01</time>
                    <span>英国</span>
                  </div>
                  <div className={`-right`}>
                    <span>影响力</span>
                    <Icon type="star" />
                    <Icon type="star" />
                    <Icon type="star" />
                  </div>
                </div>
                <div className={`-content`}>
                  <div className={`-text`}>核心生产者输出物价指数（年率）</div>
                  <div className={`-val-box`}>
                    <div className={`-current`}>
                      <span className={`-small-font`}>现值</span>
                      <span>-107.9（十亿美元）</span>
                    </div>
                    <div className={`-expected`}>
                      <span className={`-small-font`}>预期值</span>
                      <span>-200.9（十亿美元）</span>
                    </div>
                    <div className={`-previous`}>
                      <span className={`-small-font`}>前值</span>
                      <span>-102.9（十亿美元）</span>
                    </div>
                  </div>
                </div>
              </div>
            ))
          }
        </div>

        <FooterTab defaultIndex={3} />
      </div>
    )
  }
}